<script setup lang="ts">

</script>

<template>
  <Spacer height="30" />
  <view class="relative mx-24rpx h-158rpx w-702rpx">
    <image
      class="absolute bottom-0 left-0 right-0 top-0 h-158rpx w-702rpx"
      src="@/static/images/coupon_detail_bg.png"
    />
    <view class="absolute left-6rpx top-6rpx z-10 rounded-br-20rpx rounded-tl-20rpx from-#FF966D to-#FA5431 bg-gradient-to-r p-10rpx text-26rpx text-white font-bold leading-26rpx">
      包车券
    </view>
    <view class="relative z-10 h-full flex items-center">
      <view class="mt-16rpx px-56rpx text-50rpx text-#F53B25 font-black leading-50rpx">
        ¥30
      </view>
      <view class="ml-36rpx mt-7rpx">
        <view class="text-28rpx text-#666666 font-medium leading-28rpx">
          满90元可使用
        </view>
        <view class="text-28rpx text-#999999 font-medium leading-28rpx">
          2024.03.30截止
        </view>
      </view>
    </view>
  </view>
  <Spacer height="30" />
  <view class="mx-24rpx rounded-20rpx bg-white px-30rpx pb-57rpx pt-44rpx">
    <view class="flex items-baseline">
      <view class="min-w-150rpx text-28rpx text-#333333 font-medium leading-28rpx">
        有效期
      </view>
      <view class="text-28rpx text-#999999 font-medium leading-28rpx">
        2024-01-08 09:20:31至2024-01-08 09:20:31
      </view>
    </view>
    <Spacer height="64" />
    <view class="flex items-baseline">
      <view class="min-w-150rpx text-28rpx text-#333333 font-medium leading-28rpx">
        拼车券
      </view>
      <view class="text-28rpx text-#999999 font-medium leading-28rpx">
        满90元可使用
      </view>
    </view>
    <Spacer height="64" />
    <view class="flex items-baseline">
      <view class="min-w-150rpx text-28rpx text-#333333 font-medium leading-28rpx">
        使用规则
      </view>
      <view class="text-28rpx text-#999999 font-medium leading-28rpx">
        这里是使用规则
      </view>
    </view>
  </view>
</template>

<route lang="yaml">
name: 'couponDetail'
style:
  navigationBarTitleText: '我的优惠券'
</route>
